除了把字體調整成我們要的大小與顏色之外，我們也會想自己安排布局讓網頁變得更漂亮更好看一些。
CSS盒模型就派上用場啦! 定義是每個HTML元素都由一個個矩形盒子所組成，盒子包括了內容、邊框、外邊距和內邊距等和模型的重要參數來規劃我們要的內容在頁面使用的空間大小。
範例: 想像<div>元素，有一個紅色的邊框、10像素的內邊距和20像素的外邊距：
div {
border: 2px solid red; /* 红色邊框 */
padding: 10px; /* 10像素的内邊距 */
margin: 20px; /* 20像素的外邊距 */
}
這裡的<div>就是一個CSS盒模型，裡面的內外邊距與內容決定了盒模型在頁面上所佔空間的元素。
一個HTML元素的盒模型由以下四個主要部分組成：
內容（Content）：
這是元素的實際內容，如文本、圖片等。
內邊距（Padding）：
內邊距是內容與邊框之間的空間，用來調整內容與外框之間留空的距離。
邊框（Border）：
邊框包圍在內邊距外部，邊框可以具有不同的樣式、寬度和顏色。
外邊距（Margin）：
外邊距是元素和其他元素之間的空間，用來調整與下一個標籤的距離。
調整寬度和高度： 使用width和height屬性調整元素的寬度和高度。
內邊距： 使用padding屬性增加或減少元素內容的內邊距，影響元素內容與邊框之間的間距。
邊框： 使用border屬性設定元素的邊框，可以改變邊框的樣式、寬度和顏色。
外邊距： 使用margin屬性控制元素之間的外邊距，影響元素之間的間距和對齊。
可以調整看看.box內的數值觀察它如何影響元素的外觀和佈局喔!
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
Hello World !
</div>
</body>
</html>
先介紹到這裡，感謝觀看!
iThome鐵人賽
看影片追技術